<template>
  <div id="app">
    <div>
      <router-view>
      </router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      leftPopup: false,
    }
  },
  methods:{
    
  },
  watch: {
  
  },
  created:function(){
    this.$http.get('http://127.0.0.1/Vue/account/service/accountBookService.php', {
      }).then(function(res){
        console.log(res.body)
      });
  }
}
</script>

<style>
  .demo-popup-left {
    width: 70%;
    max-width: 3.75rem;
    height: 100%;
    align-items: center;
    background: url(../src/assets/image/menu-background.jpg);
    color: #ddd;
  }
</style>
<style scoped>
  /* .menu{
    position: fixed;
  } */
  .mu-appbar{
    background-color: #5DCDBF;
    position: fixed;
  }
  .link{
    display: block;
    width: 100%;
    height: 100%;
  }
  .router-link-active{
    background-color: rgba(41,47,73,.8)
  }
  .popMenu{
    text-align: center;
    width: 100%;
    height: 100%;
    padding-top: 5vh;
  }
  .avatar{
    padding-bottom: 0.1rem;
  }
  .avatar > img{
    width: 1.6rem;
    height: 1.6rem;
    border: 0.05rem solid #ccc;
    border-radius: 50%;
    vertical-align: top;
  }
  .username{
    padding-bottom: 2vh;
  }

  .state{
    display: flex;
  }
  .deposit,.cost{
    flex: 1;
  }
  .deposit{
    border-bottom: 0.03rem solid #5DCDBF;
  }
  .cost{
    border-bottom: 0.03rem solid #F89A67;
  }
  .deposit-info,.cost-info{
    font-size: 0.2rem;
    padding-bottom: 1vh;
  }
  .deposit-detail,.cost-detail{
    font-size: 0.3rem;
    padding-bottom: 2vh;
    color: white;
  }
  .menuItem{
    height: 10vh;
    text-align: left;
    line-height: 10vh;
  }
  .menuItem-icon{
    height: 50%;
    width: auto;
    padding: 0 1vh 0 3vh;
    vertical-align: middle;

  }
  .menuItem-info{
    padding-left: 0.2rem;
    font-size: 0.25rem;
    color: #ccc;
  }
</style>
